// app/EditDeviceAC/[id].tsx
import React, { useState, useEffect, useCallback } from 'react';
import { View, Text, StyleSheet, ScrollView, Button, Alert, ActivityIndicator } from 'react-native';
import { router, Stack, useLocalSearchParams } from 'expo-router'; // 引入 useLocalSearchParams
import DeviceControl from '@/components/common/DeviceControl';
import { deviceParameters, DEVICE_TYPES, DeviceParam } from '@/constants/deviceParameters';
import ButtonDemo from '@/components/features/device/ButtonDemo';

export const BACKEND_TO_FRONTEND_TYPE_MAP: Record<string, DEVICE_TYPES> = {
  air_conditioner: DEVICE_TYPES.AC,
  light: DEVICE_TYPES.LIGHT,
  camera: DEVICE_TYPES.CAMERA,
  smart_lock_with_cat_eye: DEVICE_TYPES.DOOR_LOCK,
  air_purifier: DEVICE_TYPES.AIR_PURIFIER,
  humidifier: DEVICE_TYPES.HUMIDIFIER,
  curtain: DEVICE_TYPES.CURTAIN,
  washing_machine: DEVICE_TYPES.WASHING_MACHINE,
  vacuum_robot: DEVICE_TYPES.VACUUM_ROBOT,
  refrigerator: DEVICE_TYPES.REFRIGERATOR,
  dishwasher: DEVICE_TYPES.DISHWASHER,
  water_heater: DEVICE_TYPES.WATER_HEATER,
  exhaust_fan: DEVICE_TYPES.EXHAUST_FAN,
  smart_tv: DEVICE_TYPES.SMART_TV,
  smart_speaker: DEVICE_TYPES.SMART_SPEAKER,
  temp_humidity_sensor: DEVICE_TYPES.TEMP_HUMIDITY_SENSOR,
  motion_sensor: DEVICE_TYPES.MOTION_SENSOR,
  smoke_co_alarm: DEVICE_TYPES.SMOKE_CO_ALARM,
};

// 需要屏蔽的只读字段，不然保存时报错，发现了就在这添加
const readonlyFieldsMap: Record<DEVICE_TYPES, string[]> = {
  [DEVICE_TYPES.AC]: [],
  [DEVICE_TYPES.TEMP_HUMIDITY_SENSOR]: ['temperature_c', 'humidity_percent'],
  [DEVICE_TYPES.LIGHT]: [],
  [DEVICE_TYPES.CAMERA]: [],
  [DEVICE_TYPES.DOOR_LOCK]: ['access_log'],
  [DEVICE_TYPES.CATEYE]: [],
  [DEVICE_TYPES.AIR_PURIFIER]: ['pm25_value'],
  [DEVICE_TYPES.HUMIDIFIER]: ['water_level_low'],
  [DEVICE_TYPES.CURTAIN]: [],
  [DEVICE_TYPES.WASHING_MACHINE]: ['remaining_time_min'],
  [DEVICE_TYPES.VACUUM_ROBOT]: ['battery_level', 'status'],
  [DEVICE_TYPES.REFRIGERATOR]: ['fridge_temp', 'freezer_temp'],
  [DEVICE_TYPES.DISHWASHER]: [],
  [DEVICE_TYPES.WATER_HEATER]: [],
  [DEVICE_TYPES.EXHAUST_FAN]: [],
  [DEVICE_TYPES.SMART_TV]: [],
  [DEVICE_TYPES.SMART_SPEAKER]: ['playback_status'],
  [DEVICE_TYPES.MOTION_SENSOR]: ['has_motion'],
  [DEVICE_TYPES.SMOKE_CO_ALARM]: ['smoke_ppm', 'co_ppm']
};

// 导入 API 接口
import {
  getDeviceDetails,
  updateDeviceState,
  DeviceState as ApiDeviceState, // 重命名以避免冲突
} from '@/api/device'; // 假设这个路径是正确的

// 定义本地设备状态的类型，键是字符串，值是任意类型
type LocalDeviceState = { [key: string]: any };

export default function EditDevicePage() {

  // 从路由参数获取设备ID 和 设备类型（如果存在）
  // 路径现在是 /EditDeviceAC/[id]
  const { id: deviceIdParam, deviceType: routeDeviceType } = useLocalSearchParams<{ id: string; deviceType?: DEVICE_TYPES }>();
  const deviceId = deviceIdParam; // 假设 deviceId 一定存在

  // 根据路由参数或默认值确定当前设备类型
  // 注意: 实际项目中，deviceType 最好从 getDeviceDetails 获取到的数据中推断或从后端提供

  const currentDeviceType: DEVICE_TYPES = 
  routeDeviceType ? BACKEND_TO_FRONTEND_TYPE_MAP[routeDeviceType] : DEVICE_TYPES.AC;

  const readonlyFields = readonlyFieldsMap[currentDeviceType] || [];

  // 获取当前设备的所有参数定义（来自前端映射）
  const paramsConfig: DeviceParam[] = deviceParameters[currentDeviceType] || [];

  // 存储设备从后端获取的原始状态，用于比较和恢复
  const [initialDeviceState, setInitialDeviceState] = useState<LocalDeviceState | null>(null);
  // 使用一个状态对象来存储所有参数的当前值（UI显示和修改用）
  const [currentDeviceState, setCurrentDeviceState] = useState<LocalDeviceState>({});
  // 加载状态
  const [loading, setLoading] = useState<boolean>(true);
  // 错误信息
  const [error, setError] = useState<string | null>(null);

  // --- 获取设备详情 ---
  const fetchDeviceDetails = useCallback(async () => {
    if (!deviceId) {
      setError('设备ID缺失，无法加载设备详情。');
      setLoading(false);
      return;
    }
    setLoading(true);
    setError(null); // 重置错误信息
    try {
      // 调用 getDeviceDetails API 获取设备详情
      const response = await getDeviceDetails(deviceId);
      if (response.data.ok) { // 检查API响应的ok字段 
        const apiData = response.data.data; //
        const deviceActualState = apiData.state || {}; // 设备的实际状态 
        const deviceName = apiData.name; // 设备名称 

        // 合并前端预设的初始值和后端实际值
        const mergedState: LocalDeviceState = {};
        paramsConfig.forEach(param => {
          // 如果后端有该参数的值，则使用后端的值，否则使用前端定义的 initialValue
          mergedState[param.id] = deviceActualState.hasOwnProperty(param.id)
            ? deviceActualState[param.id]
            : param.initialValue;
        });

        // 同时保存后端返回的设备名称和其他元数据
        setInitialDeviceState({ ...mergedState, name: deviceName, id: apiData.id });
        setCurrentDeviceState(mergedState);
      } else {
        // API 响应失败，显示错误信息
        setError(response.data.error?.message || '获取设备详情失败'); // 
      }
    } catch (err: any) {
      // 网络错误或其他异常
      setError(err.message || '获取设备详情网络错误');
      console.error("获取设备详情失败:", err);
    } finally {
      setLoading(false);
    }
  }, [deviceId, paramsConfig]);

  // 组件挂载时或 deviceId 改变时调用 API
  useEffect(() => {
    fetchDeviceDetails();
  }, [fetchDeviceDetails]);

  // 当某个参数的值改变时调用的函数
  const handleValueChange = (paramId: string, newValue: any) => {
    setCurrentDeviceState(prevState => ({
      ...prevState,
      [paramId]: newValue,
    }));
  };

  // --- 保存设备状态 ---
  const handleSave = async () => {
    if (!deviceId) {
      Alert.alert('错误', '设备ID缺失，无法保存。');
      return;
    }

    setLoading(true);
    setError(null);
    try {
      // 准备要发送到后端的 state 对象
      const stateToUpdate: ApiDeviceState = {};
      paramsConfig.forEach(param => {
        const paramId = param.id;
        if (readonlyFields.includes(paramId)) {
          return; // 跳过只读字段
        }
        if (currentDeviceState.hasOwnProperty(paramId)) {
          stateToUpdate[paramId] = currentDeviceState[paramId];
        }
      });

      console.log('正在保存设备状态:', deviceId, stateToUpdate);
      // 调用 updateDeviceState API 更新设备状态
      const response = await updateDeviceState(deviceId, stateToUpdate); // 
      if (response.data.ok) { // 
        alert('保存成功');
        // 保存成功后，更新 initialDeviceState 以反映最新的状态
        setInitialDeviceState(prevState => ({
            ...prevState,
            ...currentDeviceState, // 将 currentDeviceState 的所有更新应用到 initialDeviceState
        }));
        router.back(); // 返回上一页
      } else {
        // API 响应失败，显示错误信息
        setError(response.data.error?.message || '更新设备状态失败'); // 
        Alert.alert('保存失败', response.data.error?.message || '未知错误'); // 
      }
    } catch (err: any) {
      // 网络错误或其他异常
      setError(err.message || '更新设备状态网络错误');
      Alert.alert('保存失败', err.message || '网络错误');
      console.error("更新设备状态失败:", err);
    } finally {
      setLoading(false);
    }
  };

  const handleEdit = () => {
    Alert.alert('编辑', '点击了编辑按钮');
    // 这里可以添加编辑设备的逻辑，例如跳转到另一个编辑名称的页面
  };

  // 根据 power 状态显示副标题
  const subTitleText = (currentDeviceState.is_on as boolean) ? '开启' : '关闭';

  // 页面加载或出错时的UI
  if (loading && !initialDeviceState) {
    return (
      <View style={styles.centeredContainer}>
        <ActivityIndicator size="large" color="#0000ff" />
        <Text>加载设备详情...</Text>
      </View>
    );
  }

  if (error) {
    return (
      <View style={styles.centeredContainer}>
        <Text style={styles.errorText}>错误: {error}</Text>
        <Button title="重试" onPress={fetchDeviceDetails} />
      </View>
    );
  }

  // 如果没有设备数据或没有可控制的参数（例如，ID无效或设备类型未配置）
  // if (!initialDeviceState) {
  if (!initialDeviceState || Object.keys(currentDeviceState).length === 0) {
      return (
          <View style={styles.centeredContainer}>
              <Text>没有找到设备数据或设备没有可控制的参数。</Text>
              {/* 这里可能不需要返回按钮，因为没有Tab，但可以根据应用流决定 */}
              <Button title="刷新" onPress={fetchDeviceDetails} />
          </View>
      );
  }


  return (
    <ScrollView style={styles.container}>
      {/* 1. 设置页面顶部的标题 */}
      <Stack.Screen options={{ headerShown: false }} />

      {/* 页面主标题 */}
      <View style={styles.header}>
        <Text style={styles.mainTitle}>{initialDeviceState?.name || `${currentDeviceType} 1`}</Text>
        <Text style={styles.subTitle}>{subTitleText} </Text>
      </View>

      {/* 参数区域 - 设备类型 */}
      <View style={styles.section}>
        <Text style={styles.sectionTitle}>设备类型</Text>
        <Text style={styles.sectionContent}>{currentDeviceType}</Text>
      </View>

      {/* 参数区域 - 设备参数 */}
      <View style={styles.section}>
        <Text style={styles.sectionTitle}>设备参数</Text>

        {/* 动态渲染设备控制项 */}
        {paramsConfig.map((param: DeviceParam) => (
          <DeviceControl
            key={param.id}
            param={param}
            value={currentDeviceState[param.id]}
            onValueChange={handleValueChange}
          />
        ))}
      </View>

      {/* 底部按钮 */}
      <View style={styles.footer}>
        {/* <Button title="编辑" onPress={handleEdit} /> */}
        {/* <Button title="保存" onPress={handleSave} disabled={loading} />
         */}
        {/* <></> */}
        <ButtonDemo
          text="保存"
          onPress={handleSave}
          textColor="#3366cc"
          // disabled={loading}
        />
      </View>
      {loading && ( // 保存时显示小加载指示器
        <View style={styles.overlayLoading}>
          <ActivityIndicator size="small" color="#0000ff" />
        </View>
      )}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
    paddingTop: 60,
  },
  centeredContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
  },
  header: {
    padding: 20,
    backgroundColor: '#fff',
    alignItems: 'center',
  },
  mainTitle: {
    fontSize: 32,
    fontWeight: 'bold',
  },
  subTitle: {
    fontSize: 16,
    color: '#888',
    marginTop: 8,
  },
  section: {
    marginTop: 12,
    backgroundColor: '#fff',
    padding: 20,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  sectionContent: {
    fontSize: 16,
  },
  footer: {
    // flexDirection: 'row',
    justifyContent: 'space-around',
    padding: 20,
    marginTop: 20,
  },
  errorText: {
    color: 'red',
    marginBottom: 20,
    textAlign: 'center',
  },
  overlayLoading: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(255, 255, 255, 0.7)',
  },
});